const scene = new THREE.Scene();//创建一个新场景

//创建摄影机（即观察者在世界中位置）
//PerspectiveCamera(视角, 宽高比, 近裁剪面, 远裁剪面)
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;//设置终止的位置

//创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);//将渲染器添加到html中


//创建一个立方体
let cube;

const loader = new THREE.TextureLoader();

loader.load('metal003.png', texture => {
	texture.wrapS = THREE.RepeatWrapping;
	texture.wrapT = THREE.RepeatWrapping;
	texture.repeat.set(2, 2);

	const geometry = new THREE.BoxGeometry(2.4,2.4,2.4);
	const material = new THREE.MeshLambertMaterial( { map: texture } );
  //mesh创建魔方，geometry是形状，material是材质
	cube = new THREE.Mesh(geometry, material);
	scene.add(cube);

	draw();
});

//AmbientLight环境光//照亮整个场景柔光
const light = new THREE.AmbientLight('rgb(255,255,255)'); 
scene.add(light);
//spotLight聚光灯//直射的光线
const spotLight = new THREE.SpotLight('rgb(255,255,255)');
spotLight.position.set( 100, 1000, 1000 );
spotLight.castShadow = true;
scene.add(spotLight);

function draw() {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);

	requestAnimationFrame(draw);
}
